<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import type {columnType} from "@/components/admin/f_list.vue";
import F_avatar_title from "@/components/common/f_avatar_title.vue";
import {reactive, ref} from "vue";
import {userStorei} from "@/stores/user_store";
import {orderListApi, type orderListParamsType, type orderType} from "@/api/order_api";
import {orderStatusOptions, orderPaySourceOptions} from "@/options";

import {userOptionsApi} from "@/api/user_api";
const store = userStorei()
const columns: columnType[] = [
  {title: "订单号", dataIndex: 'no'},
  {title: "订单金额", dataIndex: 'price', type: "money"},
  {title: "购买积分", dataIndex: 'scope'},
  {title: "关联用户", slotName: 'user'},
  {title: "支付状态", dataIndex: 'payStatus', type: "options", options: orderStatusOptions,},
  {title: "支付渠道", dataIndex: 'paySource', type: "options", options: orderPaySourceOptions,},
  {title: "创建时间", dataIndex: 'createdAt', type: "date"},
  {title: "支付时间", dataIndex: 'payedTime', type: "date"},
  {title: "删除时间", dataIndex: 'deletedAt', type: "date", dateFormat:"current"},
  {title: "操作", slotName: 'action'},
]

const visible = ref(false)
const fListRef = ref()
const filters :filterGroupType[] = [
  {
    label: "支付状态",
    source: orderStatusOptions,
    column: "payStatus"
  },
  {
    label: "关联用户",
    source: userOptionsApi,
    column: "userID"
  }
]
</script>

<template>
  <div class="orderListView">
    <f_list
        ref="fListRef"
        :url="orderListApi"
        no-add
        no-edit
        :params="{isDeleted: true, type: 2}"
        :filter-group="filters"
        :columns="columns">
      <template #user="{record}:{record: orderType}">
        <f_avatar_title :title="record.userNickname" :avatar="record.userAvatar"></f_avatar_title>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">

</style>